<template>
	<div class="memorandum">
		<div class="memorandum-box max_W clear">
			<div class="memorandum-date fl" v-if="0">
				<schedule-calendar :events="events" :dateItemRender="itemRender" @event-dragend="changeDate">
				 </schedule-calendar>
			</div>
			<div class="memorandum-msg fr" v-if="0">
				<router-link class="memorandum-path" :to="{path: '/memorandum/add',query: {data: myTime}}">
					<i></i>
				</router-link>
				<h3>{{myTime}}</h3>
				<div class="memorandum-schedule">
					<el-scrollbar>
						<ul>
							<li class="memorandum-list" v-for="(item, index) of mySchedule" :key="index">
								<div class="clear">
									<span>{{item.time}}</span>
									<i class="el-icon-star-on" v-if="item.tab"></i>
									<div class="memorandum-op fr">
										<i class="el-icon-edit" @click="editMemorandum()"></i>
										<i class="el-icon-close" @click="removeDate"></i>
									</div>
								</div>
								<router-link class="memorandum-txt" to="/memorandum/see">
									<div v-html="item.text"></div>
								</router-link>
							</li>
						</ul>	
					</el-scrollbar>
				</div>
			</div>
			<schedule-calendar :events="events" :dateItemRender="itemRender" @event-dragend="changeDate">
				 </schedule-calendar>
		</div>
		
	</div>
</template>

<script>
	let events = [
                    {
                        id: 111,
                        date: '2019-01-09',
                        text: '老铁，扎心了',
                        time: '13:00',
                        tab: false,
                        status: 1
                    },
                    {
                        id: 222,
                        date: '2019-01-09',
                        text: '来啊，互相伤害',
                        time: '15:00',
                        tab: true,
                        status: 2
                    },
                    {
                        id: 333,
                        date: '2019-01-09',
                        text: '这个人好会装逼',
                        time: '11:00',
                        tab: true,
                        status: 3
                    },
                    {
                        id: 444,
                        date: '2019-01-09',
                        text: '那你很棒哟',
                        time: '05:00',
                        tab: false,
                        status: 4
                    },
                    {
                        id: 555,
                        date: '2019-01-09',
                        text: '我表示很无奈',
                        time: '08:00',
                        tab: false,
                        status: 5
                    },
                    {
                        id: 666,
                        date: '2019-01-10',
                        text: '老铁，扎心了',
                        time: '09:00',
                        tab: true,
                        status: 6
                    },
                    {
                        id: 777,
                        date: '2019-01-10',
                        text: '来啊，互相伤害',
                        time: '10:00',
                        tab: false,
                        status: 7
                    },
                    {
                        id: 888,
                        date: '2019-01-10',
                        text: '这个人好会装逼',
                        time: '16:00',
                        tab: true,
                        status: 8
                    },
                    {
                        id: 999,
                        date: '2019-01-11',
                        text: '那你很棒哟',
                        time: '15:00',
                        tab: true,
                        status: 9
                    },
                    {
                        id: 1010,
                        date: '2019-01-11',
                        text: '我表示很无奈',
                         time: '19:00',
                         tab: false,
                        status: 10
                    }
                ];

	import scheduleCalendar from './scheduleCalendar'
	export default{
		components: {
			scheduleCalendar
		},
		data(){
			return {
				myTime: '',
				mySchedule: [],
				events: events,
				itemRender(item) {
				    const h = this.$createElement
				    return h('span', 'CustomRender：' + item.text)
				},
			}
		},
		created(){
			this.myDate()
		},
		computed: {

		},
		methods: {
			myDate(){
				const now = new Date()
				let year = now.getFullYear()
				let month = now.getMonth() + 1;
				let date =  now.getDate()
				const fillZero = value => (value < 10 ? `0${value}` : value)
				date = fillZero(date)
				this.myTime = `${year}-${month}-${date}`

				// let time = `${now.getFullYear()}-${now.getMonth() + 1}-${d}`
				this.events = this.events.map(item => {
				    const d = item.date.split('-')[2]
				    item.date = `${now.getFullYear()}-${now.getMonth() + 1}-${d}`

				    if (this.myTime === item.date) {
				    	this.mySchedule.push(item)
				    	// console.info(this.mySchedule)
				    }
				    return item
				   
				})
			},
			changeDate(e, item, date) {
				console.info(e, item, date,10)
			    const updateIndex = this.events.findIndex(ele => ele.id === item.id)
			    this.$set(this.events, updateIndex, {
			        ...this.events[updateIndex],
			        date
			    })
			},
			editMemorandum(id){
				this.$router.push({path: '/memorandum/edit',query: {id: id}})
			},
			removeDate(){
				this.$confirm('是否删除该记录?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {});
			}
		}
	}
</script>

<style lang="scss">
	.memorandum{
		height: 78vh;
	}

	.memorandum-box{
		height: 95%;
		background: #fff;
	}
	.memorandum-date{
		width: 754/1200*100%;
	}

	.memorandum-msg{
		width: 446/1200*100%;
		height: 100%;
		background: url(../../../../public/images/Group-8.png) no-repeat;
		background-size: 100% 100%;
		>a{
			display: block;
			text-align: right;
			padding: 40px 30px 25px 0;
			>i{
				display: inline-block;
				vertical-align: top;
				width: 96px;
				height: 96px;
				background: url(../../../../public/images/1.png);
			}
			&:hover{
				>i{
					background: url(../../../../public/images/2.png);
				}
			}
		}
		>h3{
			color: #fff;
			font-size: 20px;
			margin-bottom: 25px;
			padding: 0 0 0 60px;
			line-height: initial;
		}
	}

	.memorandum-schedule{
		height: calc(100% - 210px);
		.el-scrollbar{
			height: 100%;
		}
	}

	.memorandum-list{
		background: #00aeee;
		margin-left: 60px;
		border-radius: 5px 0 0 5px;
		color: #fff;
		padding: 10px 0 15px 15px;
		font-size: 14px;
		margin-bottom: 20px;
		-moz-transition: all .35s ease-in;
		-webkit-transition: all .35s ease-in;
		-o-transition: all .35s ease-in;
		transition: all .35s ease-in;
		>div{
			line-height: initial;
			&:nth-of-type(1){
				font-weight: bold;
				margin-bottom: 10px;
				>i{
					color: #ffda31;
					margin-left: 20px;
					font-size: 18px;
				}
			}
		}
		.memorandum-txt{
			display: block;
			font-size: 12px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			color: #fff;
			height: 19px;
			line-height: 19px;
			&:hover{
				color: #f2f2f2;
			}
		}
		&:hover{
			box-shadow: 0 6px 7px 0 rgba(0,0,0,0.10);;
			.memorandum-op{
				opacity: 1;
			}
		}
	}
	
	.memorandum-op{
		opacity: 0;
		transition: .3s;
		>i{
			margin-right: 15px;
			cursor: pointer;
			font-size: 14px;
		}
		.el-icon-close{
			&:hover{
				color: red;
			}
		}
		.el-icon-edit{
			&:hover{
				color: #eba300;
			}
		}
	}


</style>